Skip to content

fix(remark): preserve code display names through raw HTML#879

Open
lizuju wants to merge 2 commits into
nodejs:mainfrom
lizuju:fix/learn-code-display-names-732
Open

fix(remark): preserve code display names through raw HTML#879
lizuju wants to merge 2 commits into
nodejs:mainfrom
lizuju:fix/learn-code-display-names-732

Conversation

@lizuju

@lizuju lizuju commented Jul 3, 2026

Copy link
Copy Markdown

Summary

  • preserve fenced code metadata across rehypeRaw in the getRemarkRecma pipeline
  • restore that metadata before Shiki groups adjacent code blocks, so displayName reaches CodeTabs
  • add regression coverage for adjacent code blocks while raw HTML parsing is enabled

Fixes #732

Verification

  • node --test --experimental-test-module-mocks src/utils/__tests__/remark.test.mjs
  • npm test
  • npm run lint (passes; existing warnings remain in src/generators/web/ui/hooks/useOrama.mjs)
  • npm run format:check
  • git diff --check
  • Generated the real learn page from nodejs/learn/pages/test-runner/collecting-code-coverage.md with node bin/cli.mjs generate -t web ...; the generated collecting-code-coverage.html now renders the first tabs as main.js and main.test.js, and the bundle contains displayNames: "main.js|main.test.js".

@lizuju lizuju requested a review from a team as a code owner July 3, 2026 10:27
@vercel

vercel Bot commented Jul 3, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
api-docs-tooling Ready Ready Preview Jul 8, 2026 1:57am

Request Review

@cursor

cursor Bot commented Jul 3, 2026

Copy link
Copy Markdown

PR Summary

Low Risk
Small, targeted change to the MDX/remark pipeline with regression tests; no auth, data, or security surface.

Overview
Fixes CodeTabs losing custom tab labels when a page mixes raw HTML with adjacent fenced code blocks in the getRemarkRecma pipeline.

remark.mjs adds preserveCodeMeta / restoreCodeMeta around rehypeRaw: fenced block metadata (e.g. displayName="main.js") is copied onto element properties before raw HTML reparsing, then restored on code nodes so Shiki can still group blocks and emit displayNames on CodeTabs.

Adds a regression test in remark.test.mjs that asserts displayNames: "main.js|main.test.js" when raw HTML precedes two labeled code fences.

Reviewed by Cursor Bugbot for commit f5311dc. Bugbot is set up for automated code reviews on this repo. Configure here.

Comment thread src/utils/__tests__/remark.test.mjs Outdated
Comment on lines +9 to +34
const visit = node => {
if (!node || typeof node !== 'object') {
return;
}

if (node.type === 'JSXOpeningElement' && node.name?.name === 'CodeTabs') {
attributes.push(
Object.fromEntries(
node.attributes.map(attribute => [
attribute.name.name,
attribute.value?.value,
])
)
);
}

Object.values(node).forEach(value => {
if (Array.isArray(value)) {
value.forEach(visit);
} else {
visit(value);
}
});
};

visit(tree);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you use unist-util-visit?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, switched the helper to unist-util-visit.

Comment thread src/utils/__tests__/remark.test.mjs Outdated
Comment on lines +43 to +54
processor.parse(`
<div class="note">raw html</div>

\`\`\`cjs displayName="main.js"
console.log(1);
\`\`\`

\`\`\`cjs displayName="main.test.js"
console.log(2);
\`\`\`
`)
);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dedent, please

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, used dedent for the markdown fixture.

@avivkeller

Copy link
Copy Markdown
Member

Bump @lizuju

@codecov

codecov Bot commented Jul 7, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.12%. Comparing base (a43c90f) to head (f5311dc).
⚠️ Report is 19 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #879      +/-   ##
==========================================
+ Coverage   84.99%   85.12%   +0.12%     
==========================================
  Files         179      180       +1     
  Lines       16407    16581     +174     
  Branches     1483     1512      +29     
==========================================
+ Hits        13945    14114     +169     
- Misses       2452     2457       +5     
  Partials       10       10              

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Comment thread src/utils/__tests__/remark.test.mjs Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

File Name Support for Learn Guides

2 participants